package myJs.member.viewSample

import myJs.CpLayer
import myJs.Implicits._
import myJs.cps._
import myJs.member.sampleManage.SampleManage
import myJs.member.updateSample.UpdateSample
import myJs.myPkg.{MyFetch, ReactRouterDOM}
import org.scalajs.dom.{URLSearchParams, html}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.React
import slinky.web.html._

import scala.concurrent.ExecutionContext.Implicits.global
import scala.scalajs.js.Dynamic.{global => g}


/**
 * Created by yz on 21/1/2022
 */
@react object Cp {

  val curPage = ViewSample
  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val curId = searchParams.get("id")

    val (idV, setIdV) = useState(curId)
    val (images, setImages) = useState(List.empty[String])

    useEffect(() => {
      val url = "http://localhost:9000/panda/sample/getById"
      MyFetch.get(url = s"${url}?id=${idV}", headers = Map("Content-Type" -> "application/json")).map { any =>
        val jDJAn = any.toJDJAn
        val images = jDJAn("images").toJArS.toList
        setImages(images)
      }

    }, List()
    )

    val formRef = React.createRef[html.Form]

    object FTool {

    }

    CpLayer(title = curPage.titleStr)(
      div(className := "page-content",
        div(className := "row-fluid",
          div(className := "row",
            div(className := "col-md-12 col-sm-12",
              div(className := "portlet light",
                div(className := "portlet-title",
                  div(className := "item",
                    div(className := "title clear",
                      a(href := s"${SampleManage.absolutePath}", SampleManage.titleStr), " / ",
                      span(curPage.titleStr)
                    )
                  ),
                ),
                div(className := "portlet-body",

                  form(className := "form-horizontal", id := "form", ref := formRef,
                    h4("基本信息"),
                    div(className := "form-group",
                      label(className := "control-label col-sm-2", "样本编号:"),
                      div(className := "col-sm-4",
                        PureInputCp(name = "id", `type` = "text", value = idV, onChange = (v: String) => setIdV(v),
                          readOnly = true)
                      )
                    ),

                    div(className := "form-group",
                      label(className := "control-label col-sm-2", "图片:"),
                      div(className := "col-sm-10",
                        ImageViewCp(images = images)
                      )
                    ),

                  ),

                  hr(),
                  div(className := "row",
                    div(className := "col-sm-5",
                      "样本信息有变动？点击此处", a(href := s"${UpdateSample.absolutePath}?id=${idV}", "修改信息")
                    )
                  )

                ),
              )
            ),

          ),

        )
      )
    )

  }


}
